<script setup lang="ts">
import { NAVS } from '~/shared/common/use-nav';

const navs = ref(NAVS);

const route = useRoute();
const currentPath = computed(() => route.path);
const checkRouteIncluded = (path: string) => {
  return path === '/' ? path === currentPath.value : currentPath.value.includes(path);
};

const showListContent = ref(false);
watch(() => route.path, () => {
  showListContent.value = false;
});
</script>

<template>
  <div class="">
    <div class="fixed top-0 left-0 w-full flex items-center justify-between px-4 h-14 bg-neutral-800 shadow-sm shadow-neutral-800 border-b border-neutral-800 z-50">
      <div class="" />
      <div>
        <i class="iconfont icon-caidan text-3xl text-neutral-500" @click="showListContent = !showListContent" />
      </div>
    </div>
    <div class="h-14"/>
    <Transition name="fade">
      <div
        v-show="showListContent"
        class="w-full h-full fixed left-0 top-0 bg-neutral-800 z-40 pt-32"
        @clik.stop.prevent
      >
        <nav class="flex flex-col items-center gap-y-6">
          <NuxtLink
            v-for="(item, idx) in navs"
            :key="idx"
            :to="item.path"
            class="text-xl font-bold border-b pb-2 px-2 border-dashed"
            :class="[checkRouteIncluded(item.path) ? 'text-amber-500 border-amber-500' : 'text-neutral-300']"
          >{{ item.title }}</NuxtLink>
        </nav>
      </div>
    </Transition>
  </div>
</template>

<style lang="scss" scoped>
.fade-enter-from, .fade-leave-to {
  opacity: 0;
  transform: translateY(10px);
}
.fade-enter-active, .fade-leave-active {
  transition: all .3s;
}
</style>